<script setup>
const props = defineProps({
  userId: {
    type: Number,
    required: true,
  },
})
console.log(props.userId, '获取文章信息')

const list = ref([
  {
    id: 1,
    title: `我的2024年终总结——不如摸鱼去`,
    summary: `这个名字来源于我非常喜欢的许嵩的专辑《不如吃茶去》。我希望自己能够偶尔脱离忙碌的生活，享受一些轻松的时光，不再日复一日地做马牛。同时，我也希望大家能够在自己的领域中，创造出属于自己的一片天地。`,
    cover: `https://img2.baidu.com/it/u=1115522663,3151405869&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800`,
    tags: [
      { id: 1, name: '前端' },
      { id: 2, name: '前端总结前端总结前端总结前端总结' },
    ],
    author: {
      id: 1,
      nickName: '不如摸鱼去',
    },
    articleMetric: {
      viewCount: 103,
      collectCount: 2,
      likeCount: 1,
      commentCount: 121,
    },
    isLike: true,
    isCollect: false,
    releaseTime: '2024-12-24',
  },
])
</script>

<template>
  <div class="min-h-500 px-8">
    <template v-for="(item, index) in list" :key="index">
      <ArticleItem :item-info="item" show-comment-count>
        <template #author>
          <span>{{ item.releaseTime }}</span>
        </template>
      </ArticleItem>
      <!-- 只在非最后一项时渲染分隔线 -->
      <el-divider v-if="index < list.length - 1" />
    </template>
    <el-empty
      v-if="list.length === 0"
      description="这里什么也没有"
      class="us"
    />
  </div>
</template>

<style scoped>
.el-divider--horizontal {
  margin: 12px 0;
}
</style>
